<template>
  <div>
    <el-input v-model="searchValue"></el-input>
    <el-table :data="list" @selection-change="selectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="nickname" label="nickname"></el-table-column>
      <el-table-column prop="datetime" label="datetime"></el-table-column>
      <el-table-column prop="tel" label="tel"></el-table-column>
      <el-table-column prop="address" label="address"></el-table-column>
      <el-table-column prop="count" label="count"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteList(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px;display: flex;justify-content: space-between;">
      <div>
        <el-button type="danger" :disabled="tempSelection.length === 0" @click="selectListSelect">选中删除</el-button>
        <el-button type="primary" @click="add">添加</el-button>
      </div>
      <el-pagination v-model:page-size="_limit" v-model:current-page="_page" background layout="total, sizes, prev, pager, next" :total="total"  :page-sizes="[10, 20, 50, 100]"/>
      <!-- {{ _page }} -->
    </div>

    <el-dialog v-model="open" :title="'添加'">
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
        <el-form-item label="nickname" prop="nickname">
          <el-input v-model="formData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="tel" prop="tel">
          <el-input v-model="formData.tel"></el-input>
        </el-form-item>
        <el-form-item label="address" prop="address">
          <el-input v-model="formData.address"></el-input>
        </el-form-item>
        <el-form-item label="datetime" prop="datetime">
          <!-- <el-input v-model="formData.datetime"></el-input> -->
          <el-date-picker v-model="formData.datetime" type="datetime" placeholder="Select date and time" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="open = false">取消</el-button>
          <el-button type="primary" @click="ok">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<!-- options 选项式api     data methods watch computed created -->
<!-- comsition 组合式api  setup -->
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { debounce } from 'lodash'
import axios from 'axios';
import type { FormInstance, FormRules } from 'element-plus'
/****************** 列表 ********************/
const _page = ref(1);
const _limit = ref(10);
const total = ref(0)
interface ListRawState {
  id: string
  nickname: string
  datetime: string
  tel: string
  address: string
  count: number
}
const list = ref<ListRawState[]>([]);
const _getList = async () => {
  const resp = await axios.get('/api/list', {
    params: {
      q: searchValue.value,
      _page: _page.value,
      _limit: _limit.value
    }
  });
  console.log(resp)
  total.value = resp.headers['x-total-count'] * 1
  list.value = resp.data
}
/****************** 搜索 ********************/
const searchValue = ref('');
watch([searchValue, _page, _limit], debounce(() => {
  _getList()
}, 400))
/****************** 删除 ********************/
const deleteList = async (id: string) => {
  await axios.delete('/api/list/' + id);
  await _getList()
}
// 临时存放选中的数据
const tempSelection = ref<ListRawState[]>([])
const selectionChange = (selection: ListRawState[]) => {
  tempSelection.value = selection
}
const selectListSelect = async () => {
  const requests = tempSelection.value.map(v => {
    return axios.delete('/api/list/' + v.id)
  })

  await Promise.all(requests);
  await _getList()
}

/****************** 添加/编辑 ********************/
const open = ref(false);
const form = ref<FormInstance>();

const rules: FormRules<ListRawState> = {
  nickname: [
    { required: true, message: '昵称不可以为空！！！', trigger: 'blur' }
  ],
  tel: [
    { required: true, message: '电话不可以为空！！！', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '地址不可以为空！！！', trigger: 'blur' }
  ],
  datetime: [
    { required: true, message: '日期不可以为空！！！', trigger: 'blur' }
  ]
}
const initData = {
  id: '',
  nickname: '',
  datetime: '',
  tel: '',
  address: '',
  count: 0
}
const formData = ref<ListRawState>(initData)
const add = () => {
  open.value = true
  formData.value = {
    id: '',
    nickname: '',
    datetime: '',
    tel: '',
    address: '',
    count: 0
  }
};
const edit = (row: ListRawState) => {
  open.value = true
  formData.value = row
}
const ok = () => {
  // 验证数据
  form.value?.validate().then(async () => {
    const data = formData.value;
    if (data.id) {
      // 编辑
      await axios.put('/api/list/' + data.id, data)
    } else {
      // 添加
      await axios.post('/api/list', data)
    }
    await _getList();
    open.value = false
  }).catch(() => ({}))

}

/****** 默认调用 **********/
_getList()
</script>